<template>
    <main-wrap class="collection" :loading="false" :load="onLoad" :end="finished">
        <template v-slot:header> 
                <Header title="红包"/>
        </template>

        <div class="rpTWrap" v-if="cashData.totalAmount">
            <div class="rpTopBox">
                <p>红包余额(￥)</p>
                <h5>{{cashData.totalAmount.decimalTwoString}}</h5>
                <div class="useBtn">
                    <my-button text="去使用" @click="goShopping"/>
                </div>
                <div class="bz">注：红包暂不参与艺术品拍卖</div>
            </div>
            <h1 class="rpTitle">红包使用记录</h1>
            <ul class="shopLst">
                <li v-for="dt in lists" :key="dt.orderNo">
                    <a>
                        <div class="title">
                            <span>{{dt.bizType.message}}</span>
                            <em v-if="dt.direction.code=='IN'"> {{dt.direction.message}} +￥{{dt.amount.decimalTwoString}}</em>
                            <em v-else style="color:#D63535"> {{dt.direction.message}} -￥{{dt.amount.decimalTwoString}}</em>
                        </div>
                        <div class="time">
                            <span><i>订单编号 {{dt.orderNo || '--'}}</i></span>
                            <em>{{dt.createTime}}</em>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

        
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import {useRouter} from 'vue-router'
import {Toast} from 'vant'
import Header from '@/components/header.vue'
import mainWrap from '@/components/mainWrap.vue'
import Image from '@/components/image.vue'
import myButton from '@/components/myButton.vue'
export default {
    components:{
        mainWrap,
        Header,
        Image,
        myButton
    },
    setup(){
        const store = useStore()
        const router = useRouter()

        const state = reactive({
            lists:[],
            pageIndex:1,
            pageSize:200,
            finished: false,
            cashData:''
        })

        onMounted(()=>{
            getBalance()
            onLoad()
        })

        const getBalance = ()=>{
            store.dispatch("arApi/get_cash_balance").then(res=>{
                res.success && (state.cashData = res.data)
            })
        }

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    const res = await store.dispatch("arApi/redpacket_record", {
                        pageIndex: state.pageIndex,
                        pageSize: state.pageSize
                    });
                    state.lists = [...state.lists, ...res.data];
                    state.pageIndex++;
                    if (state.lists.length >= res.total) {
                        state.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const sortData = (obj) =>{
            console.log("排序处理",obj)
        }
        const goShopping = (o)=>{
            router.push(`/collection`)
        }   

        return {
            ...toRefs(state),
            onLoad,
            sortData,
            goShopping
        }
    }
}
</script>

<style lang="scss" scoped>
    .collection{
        background-image: url('/images/clbg.png');
        background-position:left top;
        background-repeat: no-repeat;
        background-size:100% auto ;
    }
    .rpTWrap{
        padding: 30px 40px 10px 40px;
        .rpTitle{
            font-size: 36px;
            padding: 40px 0 20px 0;
            margin: 0;
            color: var(--baseColor);
        }
    }
    .rpTopBox{
        background: #0B4F4F;
        padding: 40px 30px;
        line-height: normal;
        text-align: center;
        p{
            font-size: 26px;
            color: var(--baseColor);
        }
        h5{
            font-size: 42px;
            font-weight: 500;
            padding: 10px 0 40px 0;
            border-bottom: 1px solid rgba(217, 217, 217, 0.2);
            margin: 0 10px;
        }
        .useBtn{
            padding: 30px 0 0 0;
        }
        .bz{
            font-size: 26px;
            color: #85A7A7;
            padding: 30px 0 0 0;
        }
    }
    
    .shopLst{
        list-style: none;
        padding: 0 0 40px 0;
        padding-bottom: 0;
        margin: 0;
        li{   
            width: 100%;
            margin: 0;
            a{
                display: block;
                height: 114px;
                width: 100%;
                border: 1px solid rgba(217, 217, 217, 0.2);
                border-left: 0;
                border-right:0 ;
                line-height: 40px;
                padding: 17px 0 0 0;
                .title,.time{
                    display: flex;
                    span{
                        flex: 1;
                        font-size: 26px;
                    }
                    em{
                        font-style: normal;
                        width: 250px;
                        font-size: 26px;
                        text-align: right;
                        color: #00CF5F;
                    }
                }
                .time{
                    span{
                       font-size: 24px; 
                       transform: scale(0.9) translateX(-25px);
                       -webkit-transform: scale(0.9) translateX(-25px);
                       color: #809191;
                    }
                    em{
                       font-size: 24px; 
                       transform: scale(0.9);
                       -webkit-transform: scale(0.9); 
                       margin-right:-10px;
                       color: #809191;
                    }
                }
            }
            &+li{
                a{
                    border-top:0 ;
                }
            }
        }
    }
</style>